<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
import geoJson from './xian.json'
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      this.$echarts.registerMap('echarts', geoJson)
      var allData = [
        {
          // 西安
          to: [108.948024, 34.263161],
          color: '#1DE9B6',
          point: [
            {
              name: '西安',
              value: 100,
              coord: [108.948024, 34.263161]
            },
            {
              name: '铜川',
              value: 150,
              coord: [108.979608, 35.016582]
            },
            {
              name: '宝鸡',
              value: 200,
              coord: [107.14487, 34.369315]
            },
            {
              name: '咸阳',
              value: 125,
              coord: [108.685117, 34.533439]
            },
            {
              name: '渭南',
              value: 75,
              coord: [109.802882, 34.499381]
            },
            {
              name: '延安',
              value: 172,
              coord: [109.49081, 36.596537]
            },
            {
              name: '汉中',
              value: 112,
              coord: [107.028621, 33.077668]
            },
            {
              name: '榆林',
              value: 174,
              coord: [109.741193, 38.290162]
            },
            {
              name: '安康',
              value: 134,
              coord: [109.029273, 32.6903]
            },
            {
              name: '商洛',
              value: 162,
              coord: [109.939776, 33.868319]
            }
          ]
        },
        {
          // 目标点
          to: [107.628621, 33.277668],
          color: '#B8BC29',
          point: [
            {
              name: '企业a',
              value: 100,
              coord: [108.548024, 34.063161]
            },
            {
              name: '企业b',
              value: 100,
              coord: [108.579608, 35.016582]
            },
            {
              name: '企业c',
              value: 100,
              coord: [107.628621, 33.277668]
            }
          ]
        }
      ]

      var series = []
      for (var i in allData) {
        var color = allData[i].color
        var ponitArr = []
        var lineArr = []
        for (var j in allData[i].point) {
          ponitArr.push({
            name: allData[i].point[j].name,
            value: [...allData[i].point[j].coord, allData[i].point[j].value]
          })
          if (allData[i].point[j].coord[0] !== allData[i].to[0] && allData[i].point[j].coord[1] !== allData[i].to[1]) {
            lineArr.push(
                [
                  {
                    coord: allData[i].point[j].coord,
                    value: allData[i].point[j].value
                  },
                  {
                    coord: allData[i].to
                  }
                ]
            )
          }

        }
        // 点
        series.push({
          // 坐标点参数和样式
          zlevel: 3,
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: ponitArr,
          symbolSize: function(val) {
            return val[2] / 10
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            },
          },
          itemStyle: {
            normal: {
              color: color,
              shadowBlur: 10,
              shadowColor: '#333'
            }
          }
        })
        // 线
        series.push(
            {
              // 线条参数和样式
              type: 'lines',
              // 变化频率
              zlevel: 2,
              effect: {
                show: true,
                // 箭头指向速度，值越小速度越快
                period: 4,
                // 特效尾迹长度,取值0到1,值越大,尾迹越长
                trailLength: 0.4,
                symbol: 'arrow',
                // 图标大小
                symbolSize: 7
              },
              lineStyle: {
                normal: {
                  color: color,
                  // 尾迹线条宽度
                  width: 1,
                  // 尾迹线条透明度
                  opacity: 0.1,
                  // 尾迹线条曲直度
                  curveness: 0.3
                }
              },
              data: lineArr
            }
        )
      }
      const option = {
        backgroundColor: '#013954',
        geo: {
          show: true,
          map: 'echarts',
          roam: true,
          zoom: 1,
          // 地图中心点, 可调节显示的偏移量
          center: [108.348024, 35.463161],
          label: {
            // 高亮文字隐藏
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#2AB8FF',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          }
        },
        // visualMap: { //图例值控制
        //   min: 0,
        //   max: 200,
        //   calculable: true,
        //   show: true,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        series: series,
        tooltip: {
          trigger: 'item',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function(params, ticket, callback) {
            var res = "";
            if (params.seriesType === 'effectScatter') {
              var name = params.name;
              var value = params.value[2];
              res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
            }
            return res;
          }
        },
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
